<template>
    <div class="wecom">
        <div class="tips">用户点击添加企微组件，打开企微二维码，用户可识别二维码添加 企微好友/企微群。</div>

        <el-form :model="form.data" label-width="auto" ref="formRef" :rules="rules">
            <el-form-item label="标题图标" prop="titleIcon">
                <div class="setcolor">
                    <ImgUpload
                        :limit="0"
                        isChange="true"
                        tipContent="建议尺寸144*144"
                        @imgStateChange="imgtitleChangeHandler"
                        :currentImg="form.data.titleIcon" />
                    <img src="@/assets/imgs/mall/decorate/return.png" class="seticon" @click="resetDefault" />
                    <div class="settext" @click="resetDefault">恢复默认图</div>
                </div>
            </el-form-item>
            <el-form-item label="标题名称" prop="title">
                <el-input v-model="form.data.title" placeholder="请填写标题名称" maxlength="10" show-word-limit />
            </el-form-item>
            <el-form-item label="描述内容" prop="description">
                <el-input v-model="form.data.description" placeholder="请填写描述内容" maxlength="16" show-word-limit />
            </el-form-item>
            <el-form-item label="按钮名称" prop="btnText">
                <el-input v-model="form.data.btnText" placeholder="请填写按钮名称" maxlength="5" show-word-limit />
            </el-form-item>
            <el-form-item label="按钮颜色">
                <div class="setcolor">
                    <el-color-picker v-model="form.data.btnColor" />
                    <img src="@/assets/imgs/mall/decorate/edit.png" class="setimg" />
                    <div class="reset" @click="resetColor">重置</div>
                </div>
            </el-form-item>
            <div class="square"></div>
            <el-form-item label="企微码" prop="qwCode">
                <ImgUpload
                    :limit="0"
                    tipContent="建议尺寸750*1624"
                    @imgStateChange="imgcodeChangeHandler"
                    :currentImg="form.data.qwCode" />
            </el-form-item>
            <div class="square"></div>
            <dev class="space-title">模块间隙</dev>
            <el-form-item label="" label-width="0">
                <el-slider v-model="form.data.space" :step="1" :max="20"> </el-slider>
                <el-input
                    style="width: 58px; margin-left: 8px"
                    v-model="form.data.space"
                    @change="changeSpace"
                    type="number"
                    onkeyup="value=value.replace(/[^\d]/g,'')" />
                <span style="margin-left: 8px">像素</span>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, reactive, watch, unref } from 'vue';
import ImgUpload from '@/components/ImageUpload.vue';
import request from '@/request';
import { ElMessage } from 'element-plus';
const props = defineProps(['comIndex', 'components', 'tabparam']);
const emit = defineEmits(['changeSetting']);
let formRef = ref();
let form = reactive({
    data: {
        title: '添加企微客服',
        position: 1,
        description: '添加企微客服享专属福利',
        btnText: '去添加',
        btnColor: '#fe292b',
        qwCode: '',
        titleIcon: '',
        space: 0
    }
});

let allitem = ref([]);
const changeSpace = () => {
    form.data.space = Number(form.data.space);
};
const rules = reactive({
    title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
    description: [{ required: true, message: '请输入描述内容', trigger: 'blur' }],
    btnText: [{ required: true, message: '请输入按钮内容', trigger: 'blur' }],
    content: [{ required: true, message: '请输入文本内容', trigger: 'blur' }],
    qwCode: [{ required: true, message: '请上传企微码', trigger: 'blur' }],
    titleIcon: [{ required: true, message: '请上传标题图标', trigger: 'change' }]
});
const resetColor = () => {
    form.data.btnColor = '#fe292b';
};
const resetDefault = () => {
    getDefaultImg();
};
const getDefaultImg = async () => {
    const res = await request('qwdefaultImg');
    form.data.titleIcon = res.data.qwDefaultLogo;
};

const imgtitleChangeHandler = ({ imgUrl, msg }) => {
    if (msg) {
        ElMessage({
            type: 'error',
            message: '上传图片只能是jpg、png、jpeg格式！'
        });
    }
    form.data.titleIcon = imgUrl;
    validateField('titleIcon');
};
const imgcodeChangeHandler = ({ imgUrl, msg }) => {
    if (msg) {
        ElMessage({
            type: 'error',
            message: msg
        });
    }
    form.data.qwCode = imgUrl;

    validateField('qwCode');
};
const clearValidate = field => {
    unref(formRef).clearValidate(field);
};

const validateField = field => {
    unref(formRef).validateField(field);
};
watch(
    () => form.data,
    val => {
        emit('changeSetting', {
            ...form.data,
            name: 'wecom',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true
    }
);
watch(
    () => props.comIndex,
    val => {
        allitem.value = props.components;
        if (allitem.value.length) {
            form.data = allitem.value[val].options;
        } else {
            form.data = {
                space: 0,
                title: '添加企微客服',
                description: '添加企微客服享专属福利',
                btnText: '去添加',
                position: 1,
                btnColor: '#fe292b',
                qwCode: '',
                titleIcon: ''
            };
        }
    },
    { immediate: true }
);
watch(
    () => props.components,
    val => {
        if (val.length && Object.keys(val[props.comIndex].options).length) {
            form.data = val[props.comIndex].options;
        } else {
            form.data = {
                space: 0,
                title: '添加企微客服',
                description: '添加企微客服享专属福利',
                btnText: '去添加',
                position: 1,
                btnColor: '#fe292b',
                qwCode: '',
                titleIcon: ''
            };
        }
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
    width: 200px;
}
:deep(.el-color-picker__trigger) {
    width: 190px;
    padding-right: 34px;
    z-index: 199;
}
:deep(.el-color-picker__color) {
    border: none;
}
:deep(.el-color-picker__icon) {
    display: none;
}
:deep(.has-upload-img) {
    width: 80px !important;
    height: 80px !important;
}
:deep(.img-uploader-icon) {
    width: 80px !important;
    height: 80px !important;
}
:deep(.tip-icon) {
    display: none !important;
}

.text {
    margin-top: 24px;
}
.square {
    border-top: 1px solid rgba(234, 234, 234, 1);
    margin-bottom: 24px;
}
.tips {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    margin: 13px 0 16px 0;
}
.alert {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #969696;
}
.space-title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    line-height: 14px;
    margin-bottom: 24px;
}
.setcolor {
    position: relative;
    z-index: 199;
    .seticon {
        cursor: pointer;
        position: absolute;
        bottom: 50px;
        right: 280px;
        width: 16px;
        height: 16px;
    }
    .settext {
        cursor: pointer;
        position: absolute;
        bottom: 42px;
        right: 206px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
    }
    .setimg {
        position: absolute;
        z-index: 100;
        right: 10px;
        width: 14px;
        height: 14px;
        top: 50%;
        margin-top: -9px;
    }
    .reset {
        position: absolute;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
}
</style>
